<template>
<div>
    <el-container style="min-height:700px;height: 100%;">
    <el-header style="border-bottom: 1px solid rgb(218 218 218);height: auto;padding-left:0">
      <div style="display: flex; margin-top: 10px;margin-bottom: 10px; justify-content: space-between;">
        <div>
          <el-checkbox v-model="formShow">{{printData.procDefName}}</el-checkbox>
          <el-checkbox v-model="recordShow">流转过程</el-checkbox>
        </div>
        <el-button size="mini" icon="Printer" type="info" v-print="printObj">打印</el-button>
      </div>
    </el-header>
    <el-scrollbar max-height="600px">
      <el-main style="margin-top:20px; padding: 0" id="printMe">
        <el-card class="box-card" shadow="never" >
          <h3 v-show="formShow" style="text-align: center">{{printData.procDefName}}</h3>

          <!--  表单数据 -->
          <div v-show="formShow" style="margin-left: 20%"  v-for="(form, index) in flowForms" :key="index">
            <v-form-render v-if="form.formType === 'online'" ref="vFormRef"/>
            <component v-else :is="form.formContent" ref="vFormRef"/>
          </div>

          <h3 v-show="recordShow" style="text-align: center">流转过程</h3>
          <!-- 审批流程 -->
          <flow-record v-if="recordShow" :flowRecordList="flowRecordList" />

        </el-card>
      </el-main>
    </el-scrollbar>
  </el-container>
</div>
</template>

<script>

import FlowRecord from "@/components/Process/record";
import {flowRecord} from "@/api/flowable/finished";

export default {
  name: "Printer",
  components: {FlowRecord},
  props: {
    printData: {
      type: Object,
      default: null,
      required: false
    },
  },
  data() {
    return {
      // 打印
      printObj: {
        id: 'printMe',//id
        popTitle: "",//自定义设置标题
      },
      flowRecordList: [],
      // 表单json
      formJson: {},
      // 表单渲染器
      vFormRef: null,
      formShow: false,
      recordShow: false,
      flowForms: []
    }
  },
  watch: {
    printData: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          if (newValue.procDefName) {
            this.loadFormData(newValue);
            this.formShow = true;
          }
          if (newValue.procInsId) {
            this.getFlowRecordList(newValue.procInsId);
          }
        }
      }
    }
  },
  methods: {
    /** 选用表单数据 */
    loadFormData(printData) {
      this.flowForms = printData.flowForms;
      this.$nextTick(() => {
        this.flowForms.forEach((form, index) => {
          // 回显在线表单
          if (form.formType === "online") {
            this.$refs.vFormRef[index].setFormJson(form.formContent);
            this.$nextTick(() => {
              this.$refs.vFormRef[index].setFormData(printData.formData);
              this.$nextTick(() => {
                this.$refs.vFormRef[index].disableForm();
              })
            })
          } else {
            // 回显路由表单
            this.$nextTick(() => {
              this.$refs.vFormRef[index].setFormData(printData.formData, true);
            })
          }
        })
      })
    },
    /** 流程流转记录 */
    getFlowRecordList(procInsId) {
      const that = this
      flowRecord({procInsId: procInsId}).then(res => {
        that.flowRecordList = res.data.flowList;
        that.recordShow = true;
      })
    },
  }
};
</script>

<style scoped>

</style>
